<template>
    <div class="dai">
        <div class="cont"></div>
            <div>
                   <el-table :data="tabos" border>
                        <el-table-column label="明细ID" prop="id"></el-table-column>
                        <el-table-column label="调拨单ID" prop="transferid"></el-table-column>
                        <el-table-column label="物料ID" prop="materialid"></el-table-column>
                        <el-table-column label="批次号" prop="batchno"></el-table-column>
                        <el-table-column label="计划调拨数量" prop="planquantity"></el-table-column>
                        <el-table-column label="已出库数量" prop="shippedquantity"></el-table-column>
                        <el-table-column label="已入库数量" prop="receivedquantity"></el-table-column>
                        <el-table-column label="创建时间" prop="createtime"></el-table-column>
                        </el-table>
            </div>
        </div>
    <el-dialog  v-model="insertVisible">
        <router-view @closeDialog="closeDialog">
        </router-view>
    </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted, watch, defineProps, defineEmits } from 'vue';
import request from '@/api/request';
import { ElMessage } from 'element-plus';

const props = defineProps({
    transferId: {
        type: String,
        required: false,
        default: ''
    }
});
const emit = defineEmits(['closeDialog']);
const insertVisible = ref(false)
const filters = ref({ id: '', transferid: '', batchno: '' });
const warehoseList = ref([]);
const loadwarehouses = () => {
    request({
        method: "get",
        url: "/inventory_sass/trees",
        params: {
            transferId: filters.value.transferid || undefined
        }
    }).then(res => {
        console.log(res.data);
        if (res.data?.data) {
            warehoseList.value = res.data.data.map(item => ({
                id: item.detailId,
                transferid: item.transferId,
                materialid: item.materialId,
                batchno: item.batchNo,
                planquantity: item.planQuantity,
                shippedquantity: item.shippedQuantity,
                receivedquantity: item.receivedQuantity,
                createtime: new Date(item.createTime).toLocaleDateString()
            }));
        } else {
            console.error("查询失败:", res.message);
            ElMessage.error("查询失败:", +res.message)
        }
    }).catch(err => {
        console.error("请求异常:", err);
        ElMessage.error("加载失败:", err.message)
    });
};
watch(
    () => props.transferId,
    (newVal, oldVal) => {
        console.log('接收transferId', newVal);
        if (newVal && newVal !== oldVal) {
            filters.value.transferid = newVal;
            loadwarehouses();
        }
    },
    { immediate: true }
)


onMounted(loadwarehouses);
const tabos = computed(() => {
    return warehoseList.value.filter(item => {
        const matchId = filters.value.id ? item.id.includes(filters.value.id) : true;
        const matchtransferid = filters.value.transferid ? item.transferid === filters.value.transferid : true;
        const matchbatchno = filters.value.batchno ? item.batchno === filters.value.batchno : true;
        return matchId && matchtransferid && matchbatchno;
    });
});

const resfrom = () => {
    filters.value = { id: "", transferid: "", batchno: "" }
    loadwarehouses();
};

const closeDialog = () => {
    emitEvent('closeDialog');
};
</script>

<style scoped>
.nmb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
    padding: 10px 0;
}

.nmbs {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 280px;
    gap: 10px
}

.nmb span {
    width: 100px;
    text-align: right;
}

.filter-input {
    flex: 1;
    min-width: 180px;
}


.reset-btn {
    margin-left: 10px;
    white-space: nowrap;
}

.a {
    margin-bottom: 20px;
}

</style>
